<template>
  <a-drawer width="80%" :title="title" :visible="open" @close="handleClose">
    <a-row :gutter="15">
      <a-col :span="8">
        <a-form-model ref="form" :model="form" :rules="rules" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
          <a-form-model-item label="作者" prop="author">
            <a-input v-model="form.author" placeholder="请输入作者"/>
          </a-form-model-item>
          <a-form-model-item label="父级包名" prop="parentPackage">
            <a-input v-model="form.parentPackage" placeholder="请输入父级包名"/>
          </a-form-model-item>
          <a-form-model-item label="maven模块名称" prop="mavenModule">
            <a-input v-model="form.mavenModule" placeholder="请输入maven模块名称"/>
          </a-form-model-item>
          <a-form-model-item label="模块名" prop="module">
            <a-input v-model="form.module" placeholder="请输入模块名"/>
          </a-form-model-item>
        </a-form-model>
      </a-col>
      <a-col :span="16">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="表名">
                  <a-input v-model="queryParam.tableName" placeholder="请输入表名" allow-clear/>
                </a-form-item>
              </a-col>
              <template v-if="advanced">
                <a-col :span="12">
                  <a-form-item label="表注释">
                    <a-input v-model="queryParam.comment" placeholder="请输入表注释" allow-clear/>
                  </a-form-item>
                </a-col>
              </template>
              <a-col :span="12">
                <span class="table-page-search-submitButtons">
                  <a-space>
                    <a-button type="primary" @click="handleQuery"><a-icon type="search"/>查询</a-button>
                    <a-button @click="handleReset"><a-icon type="redo"/>重置</a-button>
                    <a @click="advanced = !advanced">
                      {{ advanced ? '收起' : '展开' }}
                      <a-icon :type="advanced ? 'up' : 'down'"/>
                    </a>
                  </a-space>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 表格 -->
        <a-table
          :loading="loading"
          :size="tableSize"
          :columns="columns"
          :data-source="genTableList"
          :row-selection="{selectedRowKeys: selectedRowKeys, onChange: handleSelectRow}"
          :pagination="false"
          :bordered="false">
        </a-table>
        <!-- 分页 -->
        <a-pagination
          class="ant-table-pagination"
          show-size-changer
          show-quick-jumper
          :current="queryParam.pageNum"
          :total="total"
          :page-size="queryParam.pageSize"
          :showTotal="total => `共 ${total} 条`"
          @showSizeChange="handleSizeChange"
          @change="handleSizeChange"/>
      </a-col>
    </a-row>
    <div class="bottom-control">
      <a-space>
        <a-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</a-button>
        <a-button type="dashed" @click="handleClose">取消</a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import {tableMixin} from '@/store/table-mixin'
import {getDefaultConfig, listGenTableByDataBase, saveGenTable} from '@/api/generate/genTable'

export default {
  mixins: [tableMixin],
  data() {
    return {
      submitLoading: false,
      title: '',
      // 表单
      form: {},
      open: false,
      rules: {
        author: [{required: true, trigger: ['blur', 'change'], message: '请输入作者'}],
        parentPackage: [{required: true, trigger: ['blur', 'change'], message: '请输入父级包名'}],
        mavenModule: [{required: true, trigger: ['blur', 'change'], message: '请输入maven模块名称'}],
        module: [{required: true, trigger: ['blur', 'change'], message: '请输入模块名'}]
      },
      // 表格
      genTableList: [],
      selectedRowKeys: [],
      advanced: false,
      single: true,
      multiple: true,
      ids: [],
      loading: false,
      total: 0,
      queryParam: {
        tableName: '',
        comment: '',
        pageNum: 1,
        pageSize: 10
      },
      columns: [
        {dataIndex: 'comment', title: '表注释', align: 'left'},
        {dataIndex: 'tableName', title: '表名', align: 'left'},
        {dataIndex: 'createTime', title: '创建时间', align: 'left'}
      ]
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      listGenTableByDataBase(this.queryParam).then(res => {
        this.genTableList = res.data
        this.total = res.total
        this.loading = false
      })
    },
    /** 查询默认配置 */
    getConfig() {
      getDefaultConfig().then(res => {
        this.form = res.data
      })
    },
    /** 点击搜索 */
    handleQuery() {
      this.queryParam.pageNum = 1
      this.getList()
    },
    /** 点击重置 */
    handleReset() {
      this.queryParam = {
        tableName: '',
        comment: '',
        pageNum: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    /** 分页变化 */
    handleSizeChange(current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    /** 选择行 */
    handleSelectRow(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      const list = []
      selectedRows.forEach((item, index) => {
        list.push({tableName: item.tableName, comment: item.comment})
      })
      this.ids = list
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    /** 点击关闭 */
    handleClose() {
      this.reset()
      this.open = false
    },
    /** 表单重置 */
    reset() {
      this.selectedRowKeys = []
      this.form = {
        author: '',
        parentPackage: '',
        mavenModule: '',
        module: '',
        genTableJson: ''
      }
    },
    /** 点击新增 */
    handleAdd() {
      this.reset()
      this.title = '导入代码生成'
      this.getList()
      this.getConfig()
      this.open = true
    },
    /** 点击保存 */
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitLoading = true
          this.form.genTableJson = JSON.stringify(this.ids)
          saveGenTable(this.form).then(res => {
            this.$message.success(res.msg)
            this.handleClose()
            this.$emit('ok')
          }).finally(() => {
            this.submitLoading = false
          })
        }
      })
    }
  }
}
</script>
